<template>
  <div class="newsInfo">
<!--       <transition name="fade">
          <loading v-if="isLoading"></loading>
      </transition> -->
     <div class="newtitle">
        <div class="newBox">
           <p>{{title}}</p>
<!--            <img src="../assets/img/newTitle.png"> -->
        </div>
     </div>
    <div class="newContent" v-if='!content'>
          <p>{{$t('contact.nodata')}}</p>
     </div>
     <div class="newContent" id="newContent" v-html="content"  v-else>
         {{content}}  
     </div>
  </div>
</template>

<script>

import Loading from '@/components/loading'
export default {
  name: "newsInfo", 
  components:{
     Loading
  }, 
  data () {
    return {
        name:'我要测试首页',
        title:'',
        content:''
    }
  },
  mounted:function(){ 
       window.scrollTo(0, 0);
  },
  methods: {
      dataRender () {
        this.$loading(this.$t("contact.loading"));
        let self = this;
        let penga = this.$route.query.id;
        console.log(penga);
        var url = '/api/news/'+penga;
        axios.get(url)
            .then(function (response) {
             // console.log(JSON.stringify(response.data.content));
              self.title = response.data.title;
              self.closeLoading();
              var s ='';
              s = response.data.content.replace(/&amp;/g,"&");
              s = s.replace(/&lt;/g,"<");
              s = s.replace(/&gt;/g,">");
              s = s.replace(/&nbsp;/g," ");
              s = s.replace(/&#39;/g,"\'");
              s = s.replace(/&quot;/g,"\"");
              s = s.replace(/margin/gi, "m");
              s = s.replace(/text-indent/gi, "t");
              s = s.replace(/padding/gi, "p");
              // console.log(s);
              self.content = s;
            })
            .catch(function (error) {
                console.log(JSON.stringify(error));
            }) 
      },
      closeLoading(){
         this.$loading.close();
      }
  },
  created:function () {
     this.dataRender();
  }
};
</script>
<style scoped>
.newsInfo{background:#fff;width:100%;height:100%;color:#7b5c55;}
 .newtitle{background:#fff6e9;width:100%;height:auto;}  
 .newBox{width:76%;height:100%;margin:0px auto;}
 .newBox p{width:100%;line-height:30px;text-align:left;font-size:1.1rem;padding:1.5rem 0rem;font-weight:bold;}
 .newBox img{width:100%;}
 .newContent{width:76%;background:#fff;margin:30px auto;line-height:24px;min-height:calc(100vh - 580px);}
 .newContent>>>span,.newContent>>>a{line-height:24px;display:block;text-align:left;padding:1rem 0rem;width:100%;font-size:0.9rem;background:#fff;}
 .newContent>>>img,.newContent>>>p img{max-width:100%;margin:0px auto;display:block;padding-top:0.6rem;}
 .newContent>>>p{text-align:left;width:100%;line-height:24px;font-size:0.9rem;}
 .newContent>>>br{height:0px;}
/* .imgBox{width:100%;background:#fff6e9;}
 .imgBox img{max-width:100%;background:#fff6e9;}
 .newContentBox:last-child{margin-bottom:2rem;}*/
 @media screen and (max-width: 768px){
    .newBox p{width:100%;line-height:24px;text-align:left;font-size:0.9rem;padding:1rem 0rem;}
}
</style>
